<script setup lang="ts">
import { ref } from "vue";

import Followup from "./followup.vue"
import Call from "./call.vue"

const detailInfo = ref(null)
const drawer = ref(false);

function openDrawer(row) {
  detailInfo.value = row
  drawer.value = true
}

function handleClose() {
  setTimeout(() => {
    detailInfo.value = null
  }, 500)
}

const navList = ref(['客户跟进情况', '电话拨打情况'])
const navTab = ref(0)

function changeNavTab(tab) {
  navTab.value = tab
}

defineExpose({ openDrawer });
</script>

<template>
  <div v-if="detailInfo">
    <el-drawer v-model="drawer" :title="`业绩详情-${detailInfo.nickname}`" direction="ltr" size="80%" @close="handleClose">
      <div class="popup">
        <div class="left">
          <div
            :class="{ active : navTab == index }"
            v-for="(item, index) in navList"
            :key="index"
            @click="changeNavTab(index)"
          >{{ item }}</div>
        </div>
        <div class="right">
          <!-- 客户跟进情况 -->
          <Followup v-if="navTab == 0" :info="detailInfo"></Followup>

          <!-- 客户拨打情况 -->
          <Call v-if="navTab == 1" :info="detailInfo"></Call>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-drawer__title){
  font-weight: bold;
  color: #000;
  font-size: 17px;
  text-align: center;
}
:deep(.el-drawer__header){
  margin-bottom: 0;
}
:deep(.el-drawer__body){
  padding: 0;
}
.popup {
  display: flex;
  align-items: center;
  height: 100%;
  .left {
    div {
      width: 35px;
      background-color: #eee;
      height: 200px;
      cursor: pointer;
      font-size: 14px;
      color: #000;
      writing-mode: vertical-rl;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      letter-spacing: 8px;
    }
    div:nth-child(1) {
      border-radius: 0 15px 0 0;
    }
    div:nth-child(2) {
      border-radius: 0 0 15px 0;
    }
    .active {
      background-color: var(--pure-theme-menu-active-before);
      color: #fff;
    }
  }
  .right{
    flex: 1;
    overflow: hidden;
    padding: 0 20px;
    height: 100%;
  }
}
</style>
